<!-- 推荐商品卡片 -->
<template>
	<view class="good-recommend-card">
		<navigator :url="routerLink" hover-class="none">
			<view class="head">
				<text class="name">{{ name }}</text>
				<text class="intro">{{ intro }}</text>
				<uni-icons class="arrow" type="arrowright" size="30"></uni-icons>
			</view>
		</navigator>
		<view class="content">
			<scroll-view class="scroll" :scroll-x="true">
				<container :isFixed="false" :isNoData="isNoData" :isLoading="false" :nodataOption="{
					iconW:'30%',
					iconH:'20vw'
				}">
					<view class="good-list">
						<navigator
							class="item"
							:url="'/pages/goods/good-detail?id=' + item.commodityId + '&name=' + item.commodityName"
							hover-class="none"
							:key="item.commodityId"
							v-for="(item, index) in goodList"
						>
							<goods-item
							    :name-size="28"
								:img="imgHost + item.commodityPic"
								:img-height="'260rpx'"
								:price="item.sellPrice"
								:orgprice="item.marketPrice"
								:name="item.commodityName"
							></goods-item>
						</navigator>
					</view>
				</container>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import container from '@/components/container/container.vue';
import goodsItem from '../../components/goods-item/goods-item.vue';
export default {
	comments: {
		container,
		goodsItem
	},
	data() {
		return {
			imgHost: this.$imgHost
		};
	},
	props: {
		name: {
			// 名称
			type: String,
			default: '未定义'
		},

		intro: {
			// 说明
			type: String,
			default: ''
		},
		routerLink: {
			// 路由链接
			type: String,
			default: ''
		},
		goodList: {
			// 商品列表
			type: Array,
			default: function() {
				return [
					// 	{
					// 		columnId	:	4
					// 		commodityId	:	4
					// 		commodityName	:	十万个为什么
					// 		commodityPic	:	http://121.4.40.96:8080/profile/upload/d1ae1dfd-ed32-4c30-8d51-ed50e2f502fa.jpg
					// 		categoryId	:	17
					// 		categoryName	:	科普图书
					// 		stock	:	333
					// 		marketPrice	:	333
					// 		sellPrice	:	333
					// 		createTime	:	2020-12-23 07:57:42
					// 		status	:	1
					// 	},
				];
			}
		}
	},
	computed: {
		isNoData() {
			return this.goodList.length < 1;
		}
	}
};
</script>

<style lang="scss" scoped>
.good-recommend-card {
	width: 100%;
	.head {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx 20rpx 14rpx 48rpx;
		.name {
			font-size: 32rpx;
			color: #4a71f3;
			font-weight: bolder;
			margin-right: 20rpx;
		}

		.intro {
			font-size: 28rpx;
			color: #aaabb6;
		}
		.arrow {
			position: absolute;
			right: 15rpx;
			color: #768193 !important;
			font-size: 34rpx !important;
			font-weight: bold;
		}
	}
	.head::before {
		content: '';
		width: 11rpx;
		height: 35rpx;
		background: #4a71f3;
		position: absolute;
		left: 24rpx;
		border-radius: 20rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 24rpx 24rpx 24rpx;
		.scroll {
			width: 100%;
		}
		.good-list {
			display: inline-flex;
			justify-content: flex-start;
			align-items: center;
			.item {
				width: 200rpx;
			}
			.item:nth-last-child(n + 2) {
				margin-right: 30rpx;
			}
		}
	}
}
</style>
